<template>
      <!-- 顶部导航栏 -->
  <div class="top-nav">
    <div class="top-nav-left">直聘</div>
    <div class="top-nav-mid top-nav-mid-1">首页</div>
    <div class="top-nav-mid">职位</div>
    <div class="top-nav-mid top-nav-mid-2">公司</div>
    <div class="top-nav-mid"> 
      <router-link to="/Search">搜索</router-link>
    </div>
    <div class="top-nav-right top-nav-right-1">
      <router-link to="/Resume">简历</router-link>
    </div>
    <div class="top-nav-right">
      <router-link to="/Resume">个人</router-link>
    </div>
    <div class="top-nav-right top-cir"><router-link to="/Resume"></router-link>
    </div>
  </div>
  <div class="main">
    <!-- 搜索框 -->
    <div class="search">
      <div class="search-left">
        <div class="search-left-1">职业类型</div>
        <!-- <div class="search-left-2" value="搜索职位、公司"></div> -->
        <input type="text" value="搜素职位、公司">
      </div>
      <div class="search-right">搜索</div>
    </div>
    <div class="main-1">
        <div class="main-1-left">
            <div class="img-box"> </div>
            <div class="text-box"> 
                <div class="text-box-line1">顺丰速运</div>
                <div class="text-box-line2">已上市10000人以上•物流/仓储</div>
            </div>
        </div>
        <div class="main-1-right">
            <div class="right-text-1">
                <div class="right-text-1-in-num">10000</div>
                <div class="right-text-1-in">在招职位</div>
            </div>
            <div class="right-text-2">
                <div class="right-text-1-in-num">3512</div>
                <div class="right-text-1-in">位BOSS</div>
            </div>
        </div>
    </div>
    <div class="main-2"></div>
    <div class="main-3"></div>
    <div class="main-4"></div>
  </div>
  <!-- 底部 -->
</template>

<script>
export default {
    name: "enterprise2",
    data() {

    },
}
</script>

<style>
body {
  background-color: #F4F5FA;
}
/* 顶部导航栏 */
.top-nav {
  display: flex;
  width: 100%;
  height: 67px;
  background-color: hsla(232, 47%, 56%, 1);
}

.top-nav-left {
  line-height: 67px;
  margin-left: 115px;
  font-size: 36px;
  color: hsla(0, 0%, 100%, 1);

}

.top-nav-mid {
  line-height: 67px;
  padding-right: 80px;
  font-size: 24px;
  color: hsla(0, 0%, 100%, 1);
}

.top-nav-mid-1 {
  margin-left: 205px;
}
.top-nav-mid-2{
  color: #000;
}

.top-nav-right {
  line-height: 67px;
  padding-right: 17px;
  font-size: 24px;
  color: hsla(0, 0%, 100%, 1);
}

.top-nav-right-1 {
  margin-left: 445px;
}

.top-cir {
  margin-top: 7px;
  width: 51px;
  height: 46px;
  background: #F2EFEF;
  border-radius: 50%;
  border: 1px solid #F2EFEF;
}



/* 主体 */
.main{
  width: 71.5%;
  margin: 0 auto;
}
/* 搜索框 */
.search {
  display: flex;
  height: 95px;
  margin: 0 auto;
  margin-top: 84px;
  background-color: hsla(232, 47%, 56%, 1);
  border-radius: 30px;
}

.search-left {
  margin: 5px;
  border-radius: 30px;
  width: 88%;
  background-color: hsla(0, 0%, 100%, 1);
}

.search-left-1 {
  width: 182px;
  height: 85px;
  border-radius: 30px 0px 0px 30px;
  font-size: 24px;
  line-height: 85px;
  padding-left: 34px;
  background-color: hsla(232, 77%, 85%, 1);
  color: black;
}
input {
        position: relative;
        left: 182px;
        top: -85px;
        outline: none;
        width: 85%;
        height: 100%;
        border: 0;
        border-radius: 0px 30px 30px 0px;
        font-size: 24px;
        line-height: 85px;
        color: #ACB6F7;
        text-indent: 32px;
      }
.search-right {
  line-height: 94px;
  padding-left: 35px;
  font-size: 30px;
  color: hsla(0, 0%, 100%, 1);
}
/* 中间第一栏 */
.main-1{
display: flex;
justify-content: space-between;
height: 111px;
}
</style>